<template>
	<view class="lgmain animated fadeIn faster">
		<view class="position-relative">
			<view class="square position-absolute z-index-1 top-0 left-0">
				<image class="square z-index-1 position-absolute" style="opacity: .6;" mode="aspectFill"
					src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/usrbg.jpg"></image>
				<view class="square z-index-10 bgmask position-relative"></view>
			</view>
			<view class="position-fixed w-100 z-index-100 pb-1 bg-fff"
				:style="{'paddingTop':$store.state.statusBarHeight+'px','background':'rgba(255,255,255,0)'}">
				<view class="d-flex d-flex-middle d-flex-between"
					:style="{'height': $store.state.titleBarHeight + 'px'}">
					<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text>
					</view>
					<view class="colorfff font32">小嗒会员</view>
					<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
				</view>
			</view>
			<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}">
			</view>
			<view class="linerMemberbg position-absolute z-index-1 rounded40"
				style="width: 690rpx; height: 680rpx; top: 100%; left: 50%; transform: translate(-50%, 9%);">
				<view class="d-flex ml-3 mt-6">
					<image class="rounded" mode="aspectFill" :src="$store.state.user.avatar"
						style="width: 120rpx;height: 120rpx;"></image>
					<view class="d-flex-column ml-2">
						<text class="color231816 font-bold font30 ml-2 mb-1">{{$store.state.user.nickname}}</text>
						<view class="linerbg colorfff font22 px-3 py-1 rounded30">解锁谁看过我,隐身访问主页等10+权益</view>
						<text class=" font22 ml-1 mt-1"
							v-if="$store.state.user.accountType==2">VIP到期时间为：{{$store.state.user.vipExpireTime.split('T')[0].replace(/-0+(\d)/g, '-$1') }}</text>
						<text class=" font22 ml-1 mt-1"
							v-if="$store.state.user.accountType==3">SVIP到期时间为：{{$store.state.user.vipExpireTime.split('T')[0].replace(/-0+(\d)/g, '-$1') }}</text>

					</view>
				</view>
			</view>
			<view class="bg-fff position-fixed z-index-100"
				style="width: 710rpx; height: 20rpx; left: 50%; transform: translateX(-50%); border-radius: 20rpx 20rpx 0 0;"
				:style="{top: DicTop+'px'}"></view>
			<view id="container" class="bg-fff position-fixed z-index-10 pt-4"
				style="width: 735rpx; min-height: 70vh; max-height: 70vh; overflow: scroll; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 40rpx 40rpx 0 0;">
				<view class="py-2 rounded40 d-flex d-flex-middle d-flex-between"
					style="width: 680rpx; margin: 0 auto; background: #CFF0FB; border: 1px solid #46C4FF;">
					<image class="ml-2 mr-3"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202028.png"
						style="width: 30rpx; height: 30rpx;"></image>
					<text class="font24" style="color: #46C4FF; flex: 1;">身份标识：点亮标识,脱颖而出,带飞全场</text>
					<image class="mr-6"
						src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E8%B7%AF%E5%BE%84%204266.png"
						style="width: 15rpx; height: 15rpx;"></image>
				</view>
				<view class="bannerbg pb-3" style="width: 680rpx; margin: 0 auto;">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/banner.jpg"
						mode="widthFix" style="width: 100%; margin-top: 25rpx;"></image>
				</view>
				<view class="d-flex d-flex-center mb-3" style="width: 680rpx; margin: 0 auto;">
					<view style="width: 50%; margin-right: 4px;" @click="changeCtype(0)">
						<view class="d-flex d-flex-middle pt-1 linerbg-b pb-5" style="border-radius: 40rpx 40rpx 0 0;">
							<view class="position-relative" style="width: 100%;">
								<view class="font34 font-bold text-center ml-2 mt-1" style="width: 100%;">超级尊享玩家</view>
								<image
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202048.png"
									class="position-absolute"
									style="width: 35rpx; height: 35rpx; top: 16rpx; left: 40rpx;"></image>
							</view>
						</view>
					</view>
					<view style="width: 50%;" @click="changeCtype(1)">
						<view class="d-flex d-flex-middle pt-1 linerbg-pink pb-5"
							style="border-radius: 40rpx 40rpx 0 0;">
							<view class="position-relative" style="width: 100%;">
								<view class="font34 font-bold text-center ml-2 mt-1" style="width: 100%;">SVIP</view>
								<image
									src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202024.png"
									class="position-absolute"
									style="width: 35rpx; height: 35rpx; top: 16rpx; left: 105rpx;"></image>
							</view>
						</view>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" v-if="ctype === 0">
					<view :class="['scroll-view-item_H','position-relative', 
						current === index? 'Vip' : '']" @click="changeCurrent(index)" v-for="(i, index) in memberList" :key="i.id">
						<view class="title">{{i.name}}</view>
						<view class="amount">
							<view class="text">￥</view>
							<view class="num">{{device?i.androidPrice:i.iosPrice}}</view>
						</view>
						<view class="desc">
							<view class="num">{{((device?i.androidPrice:i.iosPrice)/30).toFixed(2)}}元</view>
							<view class="text">/ 天</view>
						</view>
						<view class="commonLinerbg position-absolute rounded15 font-bold"
							style="top: -20rpx; left: 6rpx; padding: 4rpx 8rpx;">限时</view>
					</view>
				</scroll-view>
				<scroll-view class="scroll-view_H" scroll-x="true" v-if="ctype === 1">
					<view :class="['scroll-view-item_H','position-relative', 
						current === index? 'Svip' : '']" @click="changeCurrent(index)" v-for="(i, index) in memberList" :key="i.id">
						<view class="title">{{i.name}}</view>
						<view class="amount">
							<view class="text">￥</view>
							<view class="num">{{device?i.androidPrice:i.iosPrice}}</view>
						</view>
						<view class="desc">
							<view class="num">{{((device?i.androidPrice:i.iosPrice)/30).toFixed(2)}}元</view>
							<view class="text">/ 天</view>
						</view>
						<view class="commonLinerbg position-absolute rounded15 font-bold"
							style="top: -20rpx; left: 6rpx; padding: 4rpx 8rpx;">限时</view>
					</view>
				</scroll-view>
				<view class="font24 text-center mt-3">活动限定,9月27日00:00前限时出售</view>
				<view class="PayOptions d-flex-between" v-for="(item, index) in PayList" :key="item.id"
					@click="ChangePayOpt(index)">
					<view class="d-flex d-flex-middle d-flex-between">
						<view class="icon">
							<image :src="item.icon"></image>
						</view>
						<view class="option mr-1" style="margin-bottom: 4rpx;">{{item.name}}</view>
						<view v-if="item.desc" class="font22 px-3 rounded10"
							style="color: #FF9645; background: #f9e7c9;">{{item.desc}}</view>
					</view>
					<radio-group class="radio-group" @change="ChangePayOpt(index)">
						<radio value="true" :checked="item.checked" style=" transform: scale(.6);" class="radio-style">
						</radio>
					</radio-group>
				</view>
				<view class="d-flex d-flex-between" style="width: 680rpx; margin: 0 auto;">
					<!-- <view class="btn" style="width: 250rpx; border: 1px solid #807a78;">朋友代付</view> -->
					<view 
						class="btn ml-2 colorfff linerbg" 
						style="width: 350rpx;" 
						@click="confirm"
					>立即以{{PayMount}}开通
					</view>
				</view>
				<view class="d-flex d-flex-center d-flex-middle">
					<label class="d-flex d-flex-middle">
						<checkbox :checked="isagree" style="transform:scale(0.6); margin-top: 3px;" @click="changeAgree"></checkbox>
						<view class="font22" style="color: #717071;" @click="changeAgree">我已阅读并同意</view>
					</label>
					<view class="font22" style="color: #2CA6E0;" @click="gotoSupperPlayerAgreement">《超级尊贵玩家服务协议》</view>
				</view>
				<view class="d-flex d-flex-middle ml-3 mt-5 mb-4">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202048.png"
						style="width: 35rpx; height: 35rpx;"></image>
					<view class="font-bold color000 ml-2">超级会员特权未解锁</view>
				</view>
				<view class="px-2 mb-4">
					<view class="d-flex-column" v-for="(item, dex) in powerList" :key="item.id">
						<view class="d-flex d-flex-bottom" style="height: 150rpx;" v-if="dex===0">
							<view :class="['column','text-center','w30','d-flex-btn',dex%2===0? 'OrdinaryTitle':'']"
								:style="[{color: dex===0? '#78797e':'#231815'},{backgroundColor: dex%2===0? '#f4f5fa' : '#fff'}]"
								style="border-radius: 30rpx 0 0 0; height: 80%; border-right: 1px solid #fff;">
								{{item.title}}</view>
							<view :class="['column','text-center','d-flex-btn', ctype===0? 'w40' : 'w30']"
								:style="[{backgroundColor: (dex%2===0&&ctype===0)? '#fff1d6' : (dex%2===0&&ctype===1)? '#f4f5fa' : (dex%2===1&&ctype===0)? '#fffdf0' : '#fff'},{height: ctype==0? '100%' : '80%'},{borderRadius: ctype===0? '30rpx 30rpx 0 0' : ''}]"
								style="border-right: 1px solid #fff;" @click="changeCtype(0)">{{item.Vip}}</view>
							<view :class="['column','text-center','d-flex-btn', ctype===0? 'w30' : 'w40']"
								:style="[{backgroundColor: (dex%2===0&&ctype===1)? '#fff1d6' : (dex%2===0&&ctype===0)? '#f4f5fa' : (dex%2===1&&ctype===1)? '#fffdf0' : '#fff'},{height: ctype==1? '100%' : '80%'},{borderRadius: ctype===1? '30rpx 30rpx 0 0' : '0 30rpx 0 0'}]"
								@click="changeCtype(1)">{{item.Svip}}</view>
						</view>
					</view>
					<view class="d-flex-column" v-for="(item, dex) in powerList" :key="item.id">
						<view class="d-flex d-flex-bottom" style="height: 100rpx;" v-if="dex!==0">
							<view
								:class="['column','text-center','h-100','w30','d-flex-btn',dex%2===0? 'OrdinaryTitle':'']"
								:style="[{color: dex===0? '#78797e':'#231815'},{backgroundColor: dex%2===0? '#f4f5fa' : '#fff'}]"
								style="border-right: 1px solid #fff;">{{item.title}}</view>
							<view :class="['column','text-center','h-100','d-flex-btn', ctype===0? 'w40' : 'w30']"
								:style="{backgroundColor: (dex%2===0&&ctype===0)? '#fff1d6' : (dex%2===0&&ctype===1)? '#f4f5fa' : (dex%2===1&&ctype===0)? '#fffdf0' : '#fff'}"
								style="border-right: 1px solid #fff;" @click="changeCtype(0)">{{item.Vip}}</view>
							<view :class="['column','text-center','h-100','d-flex-btn', ctype===0? 'w30' : 'w40']"
								:style="[{backgroundColor: (dex%2===0&&ctype===1)? '#fff1d6' : (dex%2===0&&ctype===0)? '#f4f5fa' : (dex%2===1&&ctype===1)? '#fffdf0' : '#fff'}]"
								@click="changeCtype(1)">{{item.Svip}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="IsShowCoupon" class="position-fixed top-0 left-0 right-0 bottom-0"
			style="background: rgba(0, 0, 0, .4); z-index: 1001;">
			<view class="position-relative bg-fff"
				style="top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius:10px 10px 10px 10px">
				<view class="coupon-list">
					<view class="font32 text-center mt-1 mb-3">您有以下的优惠券可以使用</view>
					<view v-for="(i, index) in couponList" :key="index" class="d-flex"
						style="height: 120rpx; width: 90%; margin: 0 auto 20rpx;">
						<view class="Cover rounded10" style="width: 90rpx; height: 100%;">
							<view class="d-flex d-flex-bottom d-flex-center colorfff" style="margin-top: 15rpx;">
								<view style="margin-bottom: 5rpx;">￥</view>
								<view class="font-bold" style="font-size: 40rpx;">{{ i.amount }}</view>
							</view>
							<view class="font16 mt-1 colorfff text-center">
								满{{ i.limitUseAmount == 0 ? i.amount : i.limitUseAmount }}元可用</view>
						</view>
						<view class="Coupon_item d-flex-middle d-flex bg-fff rounded10"
							style="flex: 1; padding: 10rpx;">
							<view class="d-flex d-flex-column ml-3" style="flex: 1;">
								<view class="font24 mt-1">{{ i.name }} </view>
								<view class="font24" style=" flex: 1;color: #b5b5b5;">有效期:{{ i.assetsExpireTime }}到期
								</view>
							</view>
							<view class="btn1 colorfff mr-3 px-2 rounded10 font20" @click="touse(i.assetsId)">选择</view>
						</view>
					</view>


					<view class="btn ml-2  colorfff"
						style="width: 75%; background-image: linear-gradient(-90deg, #f7880c 0%, #fe7039 40%, #fe536f 60%, #fe4594 90%, #f73ea0 100%);"
						@click="unuse">不使用优惠券</view>

				</view>
			</view>
		</view>
		
		<view class="position-fixed top-0 left-0 right-0 bottom-0" style="background: rgba(0, 0, 0, .5); z-index: 9999999;" v-show="showTips">
			<view class="bg-fff rounded15 position-relative" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%;">
				<view class="d-flex d-flex-column px-2">
					<view class="text-center py-5 font34" style="color: #dd524d; display: inline-block;">提示</view>
					<view class="text-center pb-4" style="color: #6c6c6c; display: inline-block;">尊敬的小嗒SVIP用户，您已经开通了SVIP会员，不需要再开通了喔~</view>
				</view>
				<view class="text-center font32 py-3" style="border-top: 1px solid #ededed;" @click="showTips = false">
					我知道了
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import {
		memberApi
	} from '../../http/memberApi';
	import {
		PayApi
	} from '../../http/PayApi';
	import {
		manner
	} from "@/util/manner.js";
	export default {
		data() {
			return {
				PackageId: null,
				current: 0,
				ctype: 0,
				IsShowCoupon: false,
				isagree: false,
				showTips: false,
				memberList: [],
				couponList: [],
				PayMount: 0,
				DicTop: null,
				price: 0,
				param: {},
				powerList: [{
						id: 0,
						title: '权益对比',
						Vip: '超级玩家',
						Svip: 'SVIP'
					},
					{
						id: 1,
						title: '查看访客',
						Vip: '√',
						Svip: '√'
					},
					{
						id: 2,
						title: '无限次一键私信',
						Vip: '-',
						Svip: '√'
					},
					{
						id: 3,
						title: '全程优先推荐',
						Vip: '-',
						Svip: '√'
					},
					{
						id: 4,
						title: '流量支持',
						Vip: '√',
						Svip: '√'
					},
					{
						id: 5,
						title: '隐私保护',
						Vip: '√',
						Svip: '√'
					},
					{
						id: 6,
						title: '浏览足迹',
						Vip: '√',
						Svip: '√'
					},
					{
						id: 7,
						title: '搭子心动信号',
						Vip: '√',
						Svip: '√'
					},
					{
						id: 8,
						title: '超级尊享身份标识',
						Vip: '-',
						Svip: '√'
					},
					{
						id: 9,
						title: '平台帐号等级加速',
						Vip: '√',
						Svip: '√'
					},
					{
						id: 10,
						title: '搭子铃全部功能卡服务',
						Vip: '-',
						Svip: '√'
					},
					{
						id: 11,
						title: '好友上限扩充',
						Vip: '1000人',
						Svip: '不限'
					},
					{
						id: 12,
						title: '专属私人客服',
						Vip: '-',
						Svip: '√'
					},
					{
						id: 14,
						title: '一键急速匹配',
						Vip: '-',
						Svip: '√'
					},
					{
						id: 15,
						title: '精选推荐',
						Vip: '-',
						Svip: '√'
					}
				],
				PayList: [
					{
						id: 2,
						icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20554.png',
						name: '嗒币',
						desc: '',
						value: 'DaBi',
						checked: true
					}
				],
				payType: null,
				WxpayParams: {}, //微信支付参数
				device: true, //默认安卓
			}
		},
		onReady() {
			this.QueryPayMount()
		},
		methods: {
			goBack() {
				manner.goBack()
			},
			changeCtype(ctype) {
				if (this.ctype === ctype) {
					return
				}
				this.current = 0
				this.ctype = ctype
				this.queryMember()
				setTimeout(() => {
					this.QueryPayMount()
				}, 500)
			},
			changeCurrent(type) {
				this.current = type
				setTimeout(() => {
					this.QueryPayMount()
				}, 300)
			},
			QueryPayMount() {
				this.PayMount = this.device ? this.memberList[this.current].androidCoinPrice + '搭币' : this.memberList[this.current].iosCoinPrice + '搭币'
				this.PackageId = this.memberList[this.current].id
				this.price = this.device ? this.memberList[this.current].androidPrice : this.memberList[this.current]
					.iosPrice
			},
			ChangePayOpt(dex) {
				this.PayList[dex].checked = true
				this.PayList.forEach((i, index) => {
					if (dex !== index) {
						this.PayList[index].checked = false
					}
				})
				if (dex == 2 && this.device) { //安卓搭币
					this.PayMount = this.memberList[this.current].androidCoinPrice + '搭币';
				} else if (dex == 2 && !this.device) {
					this.PayMount = this.memberList[this.current].iosCoinPrice + '搭币'
				} else {
					if (this.device) {
						this.PayMount = '￥' + this.memberList[this.current].androidPrice

					} else {
						this.PayMount = '￥' + this.memberList[this.current].iosPrice

					}
				}
			},
			changeAgree() {
				this.isagree = !this.isagree
				console.log(this.isagree);
			},
			async queryMember() {
				let params = {
					pageIndex: 1,
					pageSize: 10,
					type: this.ctype === 0 ? 1 : 2
				}
				const res = await memberApi.member(params)
				this.memberList = res.records
			},
			// 创建订单
			async CreateOrder(param) {
				// 获取设备类型
				const res = await PayApi.CreateOrder(param)
				console.log('dabi-res',res)
				this.Pay(res.orderNo)
				console.log("订单号：", res.orderNo);
			},
			payByWxpay() {
				uni.requestPayment({
					"provider": "wxpay", // 微信支付
					"orderInfo": {
						"appid": this.WxpayParams.appid,
						"timestamp": this.WxpayParams.timestamp,
						"noncestr": this.WxpayParams.noncestr,
						"package": "Sign=WXPay",
						"partnerid": this.WxpayParams.partnerId,
						"prepayid": this.WxpayParams.prepayId,
						"sign": this.WxpayParams.sign
					},

					success: (res) => {
						console.log('支付成功', res);
						uni.hideLoading()
						// 支付成功的处理逻辑
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: (err) => {
						console.log('支付失败，错误信息：', err);
						if (err.errCode === 'xxx') {
							// 可以根据不同的 errCode 进行不同的处理，这里的 xxx 是具体的错误码，例如用户取消支付的错误码
							console.log('用户取消支付');
						} else if (err.errCode === 'yyy') {
							// 另一种错误码 yyy 的处理
							console.log('签名错误，请联系客服');
						} else {
							console.log('其他支付错误，请重试或联系客服');
						}
						uni.hideLoading()
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			payByAlipay() { //支付宝的支付

				const orderStr = this.orderStr;
				if (!orderStr) {
					console.error('订单字符串为空，无法进行支付');
					return;
				}

				// 调用 uni.requestPayment 方法
				uni.requestPayment({
					provider: 'alipay', // 指定支付提供商为支付宝
					orderInfo: orderStr, // 订单信息
					success: (res) => {
						console.log('支付成功:', res);
						uni.hideLoading()
						uni.showToast({
							title: '支付成功',
							icon: 'none', // 使用'none'图标，只显示文字
							duration: 1000 // 显示持续时间
						});
					},
					fail: (err) => {
						console.error('支付失败:', err);
						uni.hideLoading()
						uni.showToast({
							title: '支付失败',
							icon: 'none', // 使用'none'图标，只显示文字
							duration: 1000 // 显示持续时间
						});
					}
				});
			},
			// 支付
			async Pay(orderNo) {
				let params = {
					orderNo: orderNo,
					payMethod: this.payMethod,
					payType: this.payType
				}
				try {
					await PayApi.Pay(params)
					uni.hideLoading()
					uni.showToast({
						title: '购买成功',
						icon: 'none',
						duration: 1000
					});
				} catch (error) {
					uni.hideLoading()
					console.log('error',error)
					if(error.state == '200073'){
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pagesMain/Recharge/Recharge'
							})
						},1500)
					}
					//TODO handle the exception
				}
				
				// console.log('pay-res-dabi',res)
				// if (this.payMethod == 3) { //支付宝支付
				// 	this.orderStr = res.params.orderStr;
				// 	this.payByAlipay();
				// 	return
				// }
				// if (this.payMethod == 2) { //微信支付
				// 	this.WxpayParams = {};
				// 	this.WxpayParams = res.params;
				// 	this.payByWxpay();
				// 	return
				// }
				// if (params.payType == 1) {
				// 	console.log('dabi-pay',res.paySuccess);
				// 	if (res.paySuccess) {
				// 		uni.showToast({
				// 			title: '购买成功',
				// 			icon: 'none', // 使用'none'图标，只显示文字
				// 			duration: 1000 // 显示持续时间
				// 		});
				// 	}
				// 	uni.hideLoading()
				// }
			},
			gotoSupperPlayerAgreement() {
				uni.navigateTo({
					url: '/pagesApp/SuperPlayerAgreement/SuperPlayerAgreement'
				})
			},
			gotoContinuousSubScriptionAgreement() {
				uni.navigateTo({
					url: '/pagesApp/ContinuousSubscriptionAgreement/ContinuousSubscriptionAgreement'
				})
			},
			async getCoupon() { //查询可用优惠券
				const param = {
					resourceType: this.ctype == 0 ? 6 : 7,
					amount: this.price
				};
				this.couponList = [];
				const res = await PayApi.getCoupon(param);
				this.couponList = res;
				console.log(this.couponList);
			},
			unuse() { //不使用优惠券
				this.param.sourceType = this.device ? 1 : 2;
				this.param.id = this.PackageId;
				this.param.type = this.ctype === 0 ? 1 : 2
				this.CreateOrder(this.param);
				this.IsShowCoupon = false
			},
			touse(id) { //使用优惠券
				console.log(id);
				// 选择优惠券后继续支付流程
				this.param.couponAssetsId = id;
				this.param.sourceType = this.device ? 1 : 2;
				this.param.id = this.PackageId;
				this.param.type = this.ctype === 0 ? 1 : 2
				console.log(this.param);
				this.CreateOrder(this.param);
				this.IsShowCoupon = false;
			},
			OpencouponPopup() {
				this.IsShowCoupon = true
			},
			async confirm() {
				if(this.$store.state.user.accountType == 3) {
					console.log(this.$store.state.user.accountType);
					this.showTips = true
					return
				}
				if (!this.isagree) {
					uni.showToast({
						title: '请勾选服务协议',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '加载中...'
				})
				// 确定支付方式
				this.PayList.forEach(i => {
					if (i.checked) {
						if (i.value == 'Alipay') {

							this.payMethod = 3,
								this.payType = 2
						} else if (i.value == 'Wechat') {

							this.payMethod = 2,
								this.payType = 2
						} else {
							this.payMethod = 1,
								this.payType = 1
						}
					}
				})

				await this.getCoupon();
				
				// 根据优惠券情况处理
				if (this.couponList.length > 0) {
					this.OpencouponPopup();
					uni.hideLoading()
				} else {
					this.param.sourceType = this.device ? 1 : 2;
					this.param.id = this.PackageId;
					this.param.type = this.ctype === 0 ? 1 : 2
					this.CreateOrder(this.param);
				}
			},
		},

		onLoad() {


			let systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform === 'ios') {
				this.device = false;
				console.log('当前设备是苹果设备');
			} else if (systemInfo.platform === 'android') {
				this.device = true;
				console.log('当前设备是安卓设备');
			}
			this.$nextTick(() => {
				let element = "#container";
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					console.log(res[0].top);
					this.DicTop = res[0].top
				});
			})
			this.queryMember()
			setTimeout(() => {
				this.QueryPayMount()
			}, 300)
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-list {
		padding: 20rpx;
	}

	.Cover {
		width: 90rpx;
		height: 100%;
		border-right: 1px dashed #f5f5f5;
		background-image: linear-gradient(135deg, #f7880c 0%, #fe7039 40%, #fe536f 60%, #fe4594 90%, #f73ea0 100%);
	}

	.Coupon_item {
		flex: 1;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
	}

	.btn1 {
		height: 40rpx !important;
		line-height: 40rpx !important;
		background-image: linear-gradient(-90deg, #f7880c 0%, #fe7039 40%, #fe536f 60%, #fe4594 90%, #f73ea0 100%);
	}

	.lgmain {
		min-height: 100vh;
		background-color: #fff;
	}

	.linerMemberbg {
		background: linear-gradient(to right, #f5dbf4, #f3e0f6, #d9e9fd, #c5caff);
	}

	.linerbg-b {
		background: linear-gradient(180deg, #61D1E5 0%, rgba(106, 211, 230, 0.94) 10%, rgba(131, 219, 234, 0.78) 29%, rgba(172, 230, 241, 0.52) 54%, rgba(227, 247, 250, 0.17) 86%, rgba(255, 255, 255, 0) 100%);
	}

	.linerbg-pink {
		background: linear-gradient(180deg, #E8BAFC 0%, rgba(233, 189, 252, 0.95) 9%, rgba(236, 199, 252, 0.8) 27%, rgba(241, 215, 253, 0.56) 50%, rgba(249, 237, 254, 0.25) 79%, rgba(255, 255, 255, 0) 100%);
	}

	.bgmask {
		background-color: rgba(0, 0, 0, .6);
	}

	.commonLinerbg {
		background: linear-gradient(90deg, #5DAFFD 0%, rgba(93, 175, 253, 0.8) 1%, #E7B9FB 100%);
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		height: 305rpx;
		margin-top: 20rpx;

		.scroll-view-item_H {
			overflow: visible;
			margin-top: 50rpx;
			display: inline-block;
			text-align: center;
			width: 29%;
			height: 280rpx;
			border-radius: 38rpx;
			background: #f5f5f5;
			margin: 20rpx 12rpx 0;

			.title {
				display: flex;
				justify-content: center;
				height: 50rpx;
				margin-top: 30rpx;
				font-size: 34rpx;
				color: #3E3A39;
			}

			.amount {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 140rpx;
				color: #231815;

				.num {
					font-size: 60rpx;
					font-weight: 700;
				}

				.text {
					margin-top: 20rpx;
					font-weight: 700;
				}
			}

			.desc {
				display: flex;
				justify-content: center;
				margin-bottom: 20rpx;
				font-size: 24rpx;
				color: #231815;

				.num {
					margin-right: 6rpx;
				}
			}
		}

		.scroll-view-item_H:first-child {
			margin-left: 30rpx;
		}

		.scroll-view-item_H:last-child {
			margin-right: 30rpx;
		}

		.Vip {
			background: #CFF0FB;
			border: 1px solid #46C4FF;
		}

		.Svip {
			background: #f8ebfd;
			border: 1px solid #e8bbfc;
		}
	}

	.PayOptions {
		width: 680rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.icon {
			margin-right: 26rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.option {
			color: #231815;
			font-size: 28rpx;
		}
	}

	.btn {
		margin: 30rpx auto 20rpx;
		text-align: center;
		font-size: 30rpx;
		height: 87rpx;
		line-height: 87rpx;
		border-radius: 50rpx;
	}

	.w30 {
		width: 30%;
	}

	.w40 {
		width: 40%;
	}
</style>